<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-row shadow="hover" class="ml10">
				<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="">
					<el-form-item label="条件搜索" class="formItem300">
						<el-input v-model="queryParams.content" placeholder="请输入评论内容"></el-input>
					</el-form-item>

					<el-form-item label="日期">
						<el-date-picker v-model="datePickerValue" type="daterange" value-format="YYYY-MM-DD HH:mm:ss"
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="评论类型">
						<el-select v-model="queryParams.dataType" placeholder="全部类型">
							<el-option v-for="item in categoryidDescList" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="审核状态">
						<el-select v-model="queryParams.auditStatus" placeholder="全部状态">
							<el-option v-for="item in auditStatusList" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button class="ml10" type="primary" icon="search" size="mini" @click="handleQuery"> 查询 </el-button>
						<el-button icon="Refresh" size="mini" @click="resetQuery"> 重置 </el-button>
					</el-form-item>
				</el-form>
			</el-row>
			<el-table v-loading="loading" :data="list" style="width: 100%" border
				:header-cell-style="{ background: '#f5f7fa!important', color: '#000' }">
				<el-table-column label="序号" type="index" align="center" width="80"> </el-table-column>
				<el-table-column label="评论ID" align="center" prop="bizId" width="180" />
				<el-table-column label="评论内容" align="center" prop="content" width="440" />
				<el-table-column label="评论链接" align="center" prop="bizUrl" width="760">
					<template #default="scope">
						<div class="linkDiv">{{ scope.row.bizUrl }}</div>
					</template>
				</el-table-column>
				<el-table-column label="评论人" align="center" prop="publisherName" width="150">
					<template #default="scope">
						<span>{{ scope.row.userVo.nikename }}</span>
					</template>
				</el-table-column>

				<el-table-column label="评论时间" align="center" prop="createTimestamp" width="120">
					<template #default="scope">
						<span v-if="scope.row.publishTime">{{ scope.row.createTimestamp }}</span>
					</template>
				</el-table-column>
				<el-table-column label="评论类型" align="center" prop="dataTypeDesc" width="120" />
				<el-table-column label="是否实名认证" align="center" prop="realStatus" width="120">
					<template #default="scope">
						<span v-if="scope.row.realStatus == null">未认证</span>
						<span v-else>{{ scope.row.realStatus }}</span>
					</template>
				</el-table-column>
				<el-table-column label="审核状态" align="center" prop="auditStatusDesc" width="120" />
				<el-table-column label="发布状态" align="center" prop="publishStatusDesc" width="120" />
				<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
					<template #default="scope">
						<!-- <el-button link icon="" @click="auditRecordId(scope.row)" v-if="scope.row.auditStatus === 'pending'"
							type="primary"> 审核 </el-button>
						<el-button link icon="" @click="auditRecordId(scope.row)" v-else disabled> 审核 </el-button> -->
						<el-button link icon="" @click="details(scope.row)" type="primary"> 查看详情 </el-button>
						<el-button link icon="" @click="commentDelete(scope.row)" type="primary"
							:disabled="scope.row.publishStatus == 'deleted'"> 删除 </el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination class="paginationdDom" background @size-change="handleSizeChange"
				@current-change="handleCurrentChange" :current-page="queryParams.current" :page-size="queryParams.size"
				:layout="layout" :total="total">
			</el-pagination>
			<el-dialog v-model="dialogFormVisible" title="审核" width="500">
				<el-form :model="form">
					<el-form-item label="审核状态" :label-width="formLabelWidth">
						<el-select v-model="form.auditStatus" placeholder="全部状态">
							<el-option v-for="item in formAuditStatus" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="审核类型" :label-width="formLabelWidth">
						<el-select v-model="form.tag" placeholder="全部类型">
							<el-option v-for="item in monitoringType" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="审核结果" :label-width="formLabelWidth">
						<el-select v-model="form.auditResult" placeholder="全部">
							<el-option v-for="item in auditResultList" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="结果说明" :label-width="formLabelWidth">
						<el-input type="textarea" v-model="form.auditDesc" :rows="3" placeholder="请输入审核说明" />
					</el-form-item>
				</el-form>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取消</el-button>
						<el-button type="primary" @click="auditRecordAudit()">确定 </el-button>
					</div>
				</template>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import { auditRecordId, auditRecordAudit } from '/@/api/admin/monitor';
import { commentPage, dictItemPage ,commentDelete} from '/@/api/admin/content';
import { useMessage } from '/@/hooks/message';
export default {
	name: 'Online',
	data() {
		return {
			layout: 'total, sizes, prev, pager, next, jumper',
			total: 100,
			datePickerValue: [],
			form: {},
			dialogFormVisible: false,
			categoryidDescList: [],
			monitoringType: [
				{
					value: '',
					label: '全部类型',
				},
				{
					value: 'audit_label_pornography',
					label: '涉黄',
				},
				{
					value: 'audit_label_politics',
					label: '涉政',
				},
				{
					value: 'audit_label_drugs',
					label: '涉毒',
				},
				{
					value: 'audit_label_gambling',
					label: '涉赌',
				},
				{
					value: 'audit_label_religion',
					label: '宗教',
				},
				{
					value: 'audit_label_superstition',
					label: '迷信',
				},
				{
					value: 'audit_label_terrorism',
					label: '涉恐',
				},
				{
					value: 'audit_label_other',
					label: '其他',
				},
				{
					value: 'audit_label_none',
					label: '无风险',
				},
			],
			ViolationLevel: [
				{
					value: '',
					label: '全部类型',
				},
				{
					value: 'high',
					label: '高风险',
				},
				{
					value: 'medium',
					label: '中风险',
				},
				{
					value: 'low',
					label: '低风险',
				},
				{
					value: 'none',
					label: '无风险',
				},
			],
			auditStatusList: [
				{
					value: '',
					label: '全部类型',
				},
				{
					value: 'pending',
					label: '待审核',
				},
				{
					value: 'approved',
					label: '已审核',
				},
				{
					value: 'under_review',
					label: '审核中',
				},
				{
					value: 'rejected',
					label: '未通过',
				},
			],
			formAuditStatus: [
				{
					value: 'approved',
					label: '已审核',
				},
				{
					value: 'rejected',
					label: '未通过',
				},
			],
			auditResultList: [
				{
					value: '',
					label: '全部类型',
				},
				{
					value: 'pass',
					label: '无违法信息',
				},
				{
					value: 'illegal',
					label: '涉嫌违法信息',
				},
				{
					value: 'audit_result',
					label: '持续监控信息',
				},
			],

			// 遮罩层
			loading: false,
			// 总条数
			total: 0,
			// 表格数据
			list: [],
			// 查询参数
			detailsInfo: {},
			queryParams: {
				createTimeStart: '',
				createTimeEnd: '',
				current: 1,
				size: 10,
				dataType: '', //监控内容类型
				riskLevel: '', //风险等级
				tag: '', //'监控类型'
			},
		};
	},
	created() {
		this.commentPage();
	},
	mounted(){
		this.dictItemPage()
	},
	methods: {
		dictItemPage() {
			let data = {
				ascs: '',
				current: 1,
				descs: '',
				dictId: '1944716500000000001',
				dictType: 'data_type',
				size: 10,
			};
				dictItemPage(data).then((res) => {
					
				for (let item of res.data.records) {
					let resData = {
						id: item.value,
						name: item.label
,
					};
					this.categoryidDescList.push(resData);
				}
			});
		},
		handleSizeChange(val) {
			this.queryParams.size = val;
			this.queryParams.current = 1; //调整每页数目时，重置当前页，避免当前显示在不存在的页数
			this.commentPage(); //调接口，更新数据
		},
		// 更改当前页
		handleCurrentChange(val) {
			this.queryParams.current = val;
			this.commentPage(); //调接口，更新数据
		},
		commentPage() {
			this.loading = true;
			let data = this.queryParams;
			commentPage(data).then((response) => {
				this.list = response.data.records;
				this.total = response.data.total;
				this.loading = false;
			});
		},
		auditRecordId(row) {
			let data = {
				id: row.id,
			};
			this.form = this.$options.data().form;
			auditRecordId(data).then((res) => {
				this.form.auditDesc = res.data.auditDesc;
				this.form.auditResult = res.data.auditResult;
				this.form.id = res.data.id;
				this.dialogFormVisible = true;
			});
		},
		auditRecordAudit() {
			let data = this.form;
			auditRecordAudit(data)
				.then((res) => {
					if (res.code == 0) {
						this.commentPage();
						useMessage().success(res.data);
						this.dialogFormVisible = false;
					}
				})
				.catch((err) => {});
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.createTimeStart = this.datePickerValue[0];
			this.queryParams.createTimeEnd = this.datePickerValue[1];
			this.commentPage();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.queryParams = this.$options.data().queryParams;
			this.datePickerValue = [];
			this.commentPage();
		},
		commentDelete(row){
			let data={
				id:row.id
			}
			commentDelete(data).then(res=>{
				this.commentPage();
			})
		},
		/** 强退按钮操作 */
		details(row) {
			this.$router.push({ path: '/comment/details/index', query: { id: row.id,reportedType:"comment" } });
		},
	},
};
</script>
<style lang="scss" scoped>
.dialogDom {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;

	>div {
		width: 30%;
		margin-right: 2%;
		margin-bottom: 2%;
	}
}

.dialogDiv {
	margin-bottom: 2%;
}

.linkDiv {
	white-space: pre-wrap;
	word-wrap: break-word;
	text-align: justify;
}
</style>
